<template>
  <div class='filter box-size'>
    <span class="title fl">{{filterTitle||'记录列表'}}</span>
    
    <div class="search-box fl pr" v-show="false">
        <search
          @result-click="getResult"
          @on-change="getResult"
          v-model="search"
          position="absolute"
          @on-cancel="getResult"
          @on-submit="getResult"
          ref="search">
        </search>
    </div>

    <div class="fr btn-box">
      <span v-for="item in getListData" class="filter-btn" @click="filter(item)"><img :src="item.img" alt="">{{item.name}}</span>
    </div>

    <div v-transfer-dom>
      <popup v-model="show.filter">
        <!-- group already has a top border, so we need to hide header's bottom border-->
        <popup-header
        :left-text="'取消'"
        :right-text="'确定'"
        :title="timeTitle"
        :show-bottom-border="true"
        @on-click-left="show.filter = false"
        @on-click-right="getTime">
        </popup-header>
        <div class="proup-box">
          <div class="input-box"><input v-model="time.starttime" type="text" placeholder="选择开始时间" @click="changeKey('starttime')" readonly>至<input v-model="time.endtime" type="text" placeholder="选择截止时间" @click.prevent="changeKey('endtime')" readonly></div>
          <datetime-view v-model="time[key]" ref="datetime" :format="'YYYY-MM-DD'"></datetime-view>
        </div>
      </popup>
    </div>
    
    <div v-show="show.search" class="pa search-model" @click="show.search=false">
      <div @click.stop="show.search=true">
        <input type="text" placeholder="输入关键字搜索"  v-model="search">
        <span class="pa" @click.stop="getResult">
          <img class="search-model2" :src="imgs.searchModel" alt="">
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import { PopupHeader,TransferDom,Popup,DatetimeView,Search} from 'vux'
export default {
  directives: {
    TransferDom
  },
  props:["filterTitle","listData"],
  components: {PopupHeader,Popup,DatetimeView,Search},
  name: "",
  data() {
    return {
      imgs:{
        search:require("../../assets/img/hpmepage/serve/search.png"),
        searchModel:require('../../assets/img/hpmepage/search.png'),
        filter:require("../../assets/img/hpmepage/serve/filter.png"),
      },
      
      show:{
        filter:false,
        search:false
      },

      time:{
        starttime:"",
        endtime:"",
      },
      search:"",


      timeTitle:"选择开始时间",
      key:"starttime"
    };
  },
  computed:{
    getListData(){
      return this.listData||[{name:"搜索",img:this.imgs.search,click:this.showSearch},{name:"筛选",img:this.imgs.filter,click:this.showFilter}]
    }
  },
  methods: {
    filter(item){
      item.click()
    },

    showFilter(){
      this.show.filter=true
    },
    showSearch(){
      this.show.search=true
    },

    // 搜搜
    getResult(){
      console.log("click---search--")
      this.show.search=false
      var params={
        search:this.search,
        // time:[this.time.starttime,this.time.endtime]
      }
      this.$emit("filterTime",params)
    },


    // 时间筛选
    getTime(){
      var params={
        search:this.search,
        time:[this.time.starttime,this.time.endtime]
      }
      this.$emit("filterTime",params)
      this.show.filter=false
    },

    changeKey(str){
      this.timeTitle=str=="starttime"?"选择开始时间":"选择截止时间"
      this.$set(this,"key",str)
    }
  },
  created() {
    this.time.starttime=this.time.endtime=new Date().toLocaleDateString().replace(/\//g,"-")
  }
};
</script>
<style lang="scss" scoped>
.filter {
  padding:0 15px;
  height: 32px;
  font-size: 12px;
  color: #999;
  box-sizing: border-box;
  border-bottom: 1px solid #F2F2F2;

  .title{
    line-height: 32px;
  }
  .search-box{
    width: calc(100% - 100px);
    line-height: 32px;
    padding-left: 10px;
    box-sizing: border-box;
    
  }
  .btn-box{
    margin-top: 7px;
  }
  .filter-btn{
    margin-left: 5px;
    display: inline-block;
    box-sizing: border-box;
    width: 47px;
    padding: 0 1px;
    border: 1px solid #D2D2D2;
    border-radius: 2px;
    text-align: center;
    

    img{
      width: 12px;
      height: 12px;
      float: left;
      transform: translateY(2px);
      margin-right: 3px;
      margin-left: 2px;
    }
  }
  .filter-btn:active{
    opacity: .6;
  }
  .search-model{
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(125, 122, 122, 0.5);

    div{
      position: relative;
      margin: 5vh 15px;

      input{
        border: 1px solid #FF9F20;
        outline: none;
        text-align: center;
        height: 32px;
        line-height: 32px;
        width: 100%;
        border-radius: 17px;
        box-sizing: border-box;
      }

      span{
        right: 0px;
        top: 0px;
        height: 100%;
        width: 45px;
        line-height: 34px;
        text-align: center;
        border-top-right-radius: 17px;
        border-bottom-right-radius: 17px;
        background-color: #FF9F20;
        color: #fff;
      }
      
      span:active{
        opacity: .6;
      }
    }
    .search-model2{
      width: 20px;
      margin: 6px auto;
    }
  }

}
</style>